import {Component} from "react";
import React from "react";
// import {NavLink} from "react-router-dom";
import Bscroll from "better-scroll";
import asyncComponent from '../untils/asyncComponent'

const Article = asyncComponent(() => import('../pages/article'));
const img1 = require('../images/drop-tip.png');
const img2 = require('../images/loading-list.gif');

class List extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgStyle: {transform: 'rotate(0deg)'},
            tipsText: '下拉刷新',
            showTips: false,
            showDetail: false,
            id: 0,
            imgSrc: img1,
            page: 1
        };
        this.hideDetail = this.hideDetail.bind(this);
    }

    render() {
        return (
            <div className='appcontainer'>
                <div ref='banner' className='list-content'>
                    <div className="newsList">
                        {
                            this.state.showTips ?
                                <div className="drop-tips">
                                    <img src={this.state.imgSrc} style={this.state.imgStyle}/>
                                    <span>{this.state.tipsText}</span>
                                </div> : ''
                        }

                        <ul>
                            {
                                this.props.list.map((item, index) => {
                                    return (
                                        <li key={item.id} onClick={this.goDetail.bind(this, item.id)}>
                                            <a href='javascript:void 0;'>
                                                <h2>{index + 1}.{item.goldTitle}</h2>
                                                <p>{item.label}</p>
                                            </a>
                                        </li>
                                    )
                                })
                            }

                        </ul>

                    </div>

                </div>
                {
                    this.state.showDetail ?
                        <Article id={this.state.id} hideDetail={this.hideDetail} path={this.props.path}/> : ''
                }
            </div>
        )
    }

    componentDidMount() {
        let scroll = new Bscroll(this.refs.banner, {
            probeType: 1,
            click: true,
            scrollY: true
        });
        let _this = this;
        let scrollDisct;
        scroll.off('scroll');
        scroll.on('scroll', function (pos) {
            if (pos.y > 10) {
                console.log('下拉刷新');
                _this.setState({
                    showTips: true,
                    imgStyle: {transform: 'rotate(0deg)'},
                    tipsText: '下拉刷新',
                    imgSrc: img1
                })
            }
            if (pos.y > 50) {
                console.log('释放立即刷新');
                _this.setState({
                    imgStyle: {transform: 'rotate(180deg)'},
                    tipsText: '释放立即刷新'
                });
                scrollDisct = pos.y;
            }
        });
        scroll.off('scrollEnd');
        scroll.on('scrollEnd', function () {
            if ((scroll.y <= (scroll.maxScrollY + 50))) {

                console.log("加载数据")
                let page = _this.state.page;
                page++;
                _this.setState({
                    page: page
                });
                _this.props.getList(1, page)
            }

            if (scrollDisct > 50) {
                console.log('刷新数据');
                _this.setState({
                    tipsText: "正在加载",
                    imgSrc: img2,
                    page:1
                });
                _this.props.getList(1, 1, true);
            }

            setTimeout(() => {
                _this.setState({
                    showTips: false,
                });
                scrollDisct = 0;
            }, 1000)
        });
    }

    goDetail(id) {
        this.setState({
            id: id,
            showDetail: true
        })
    }

    hideDetail() {
        this.setState({
            showDetail: false
        })
    }
}

export default List

// <NavLink to={{pathname: '/article', search: 'id=' + item.id}}>
// <h2>{index + 1}.{item.goldTitle}</h2>
// <p>{item.label}</p>
// </NavLink>